<template>
	<view class="zhiwei">
		<view class="top_zhiwei">
			<text class="name">前端开发工程师</text>
			<text class="money">8-12K</text>
		</view>
		<view class="address">
			<view class="info">徐州奥特莱斯XXXX</view>
			<view class="need">需求人数5</view>
		</view>
		<u-divider></u-divider>
		<view class="zhize">岗位职责</view>
		<view class="text">是空间撒哈空间撒哈空间上大号空间的撒谎的空间萨达哈空间撒</view>
		<map id="mapSelected" style="width: 690rpx; height: 200px; margin-left: 30rpx;" :latitude="latitude"
			:longitude="longitude" :markers="covers" :controls="controls" :scale="18" 
			/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 39.909, // 默认纬度
				longitude: 116.39742, // 默认经度(北京天安门)
				covers: [{
					id: 110,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '	https://hellouniapp.dcloud.net.cn/static/location.png',
					width: "20",
					height: "20"
				}],
				controls: [{ // 控件
					id: 99,
					position: { // 控件位置
						left: 160,
						top: 120
					},
					iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标
				}]

			}
		},
		onLoad() {
			this.isGetLocation()
		},
		methods: {
			isGetLocation(a = "scope.userLocation") { //检查当前是否已经授权访问scope属性
				var _this = this;
				uni.getSetting({
					success(res) {
						console.log(res)
						if (!res.authSetting[a]) { //每次进入程序判断当前是否获得授权，如果没有就去获得授权，如果获得授权，就直接获取当前地理位置
							_this.getAuthorizeInfo()
						} else {
							//方式一
							_this.getLocationInfo();
							// 方式二
							//_this.getLocation();
						}
					}
				});
			},
			getAuthorizeInfo(a = "scope.userLocation") { // uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
				var _this = this;
				uni.authorize({
					scope: a,
					success() { //允许授权
						//方式一
						_this.getLocationInfo();
						// 方式二
						//_this.getLocation();
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.zhiwei {

		width: 100%;

		.top_zhiwei {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;

			.name {
				font-size: 42rpx;
				font-weight: 600;
			}

			.money {
				color: #31a889;
				font-size: 40rpx;
				font-weight: 600;
			}
		}

		.address {

			padding: 0 20rpx;
			padding-bottom: 20rpx;
			display: flex;
			justify-content: space-between;

			.info {
				font-size: 26rpx;
				color: #666;
			}

			.need {
				font-size: 26rpx;
				color: #666;
			}
		}

		.zhize {
			padding: 0 20rpx;
			padding-bottom: 20rpx;
			font-size: 30rpx;
		}

		.text {
			padding: 0 20rpx;
			padding-bottom: 20rpx;
			color: #999;
			font-size: 28rpx;
		}
	}
</style>